<template>
    <div>
        <div class="content"  v-if="headerAdd">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="组件类别">
                  <el-select v-model="componentType" clearable placeholder="请选择">
                    <el-option
                      v-for="item in options"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name">
                    </el-option>
                  </el-select>
                </el-form-item>
              
                <el-button type="primary" @click="btnAdd">新增</el-button>
                <el-button type="primary" @click="btnSearch" plain>查询</el-button>
            </el-form>
            <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              fixed
              prop="componentType"
              label="组件类别"
              >
            </el-table-column>
            <el-table-column
              prop="consumption"
              label="消费"
              >
            </el-table-column>
            <el-table-column
              prop="toShow"
              label="展现"
              >
            </el-table-column>
            <el-table-column
              prop="click"
              label="点击"
              >
            </el-table-column>
            <el-table-column
            prop="promotionDevice"
            label="推广设备"
            >
          </el-table-column>
          <el-table-column
            prop="promotionPlan"
            label="推广计划"
            >
          </el-table-column>
          <el-table-column
            prop="promotionUnit"
            label="推广单元"
            >
          </el-table-column>
          <el-table-column
            prop="click"
            label="点击"
            >
          </el-table-column>
          <el-table-column
            prop="clickRegion"
            label="深度转化成本"
            >
          </el-table-column>
          <el-table-column
          prop="conversionAmount"
          label="点击区域"
          >
        </el-table-column>
           
       
            <el-table-column
              fixed="right"
              label="操作"
              width="150">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button @click="btnEdit(scope.row)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" @click="btnDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="footer" v-if="headerAdd">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
          <add v-if="addShow" @quxiao="quxiao" :objDate2="objDate2"></add>
          <see v-if="seeShow" @quxiao2="quxiao2" :objDate="objDate"></see>
    </div>
</template>
<script>
   import see from './component/see'
    import add from './component/add'
    import {list,del} from '@/api/shuju/zujian'
    export default{
        name:'danyuan',
        data(){
            return{
                componentType:"",
              promotionDevice:"",
              options:[
                {
                  name:'图片类'
                },
                {
                  name:'营销类'
                },
                {
                  name:'文字类'
                },
                {
                  name:'本地类'
                },
                {
                  name:'视频类'
                },
                {
                  name:'商品类'
                },
                {
                  name:'应用类'
                },
              ],
              promotionPlan:"",
              productTitle:"",
              objDate:{},
              objDate2:{},
              seeShow:false,
                total:0,
                headerAdd:true,
                addShow:false,
                tableData:[],
                pageNum:1,
                pageSize:10
            }
        },
        components:{
            add,
            see
        },
        mounted() {
         this.getlist()
      },
        methods: {
          //删除
          btnDelete(e){
            let parm={
                componentReportId:e.componentReportId
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          del(parm).then((res)=>{
            if(res.code ==200){
              this.getlist()
              this.$message({
            type: 'success',
            message: '删除成功!'
          });
            }
          })
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
          },
          btnSearch(){
            this.getlist()
          },
          btnEdit(e){
            this.headerAdd=false
            this.addShow=true
            this.objDate2=e
          },
          handleClick(e){
            this.headerAdd=false
            this.seeShow=true
            this.objDate=e
            console.log('111',this.objDate)
          },
          handleSizeChange(e){
            this.pageSize=e
            this.getlist()
          },
          handleCurrentChange(e){
            this.pageNum=e
            this.getlist()
          },
          //列表
          getlist(){
            let parm={
              pageNum:this.pageNum,
              pageSize:this.pageSize,
              componentType:this.componentType
            }
            list(parm).then((res)=>{
              console.log('列表0',res)
              this.tableData=res.rows
              this.total=res.total
            })
          },
          quxiao(){
          
            this.addShow=false,
            this.seeShow=false
            this.headerAdd=true
            this.getlist()
          },
          quxiao2(){
            this.addShow=false,
            this.seeShow=false
            this.headerAdd=true
            this.getlist()
          },
          btnAdd(){
            this.objDate2={}
            this.addShow=true
            this.headerAdd=false
          }
        },
    }
</script>
<style scoped>
.content{
    width: 98%;
    margin: 0 auto;
    margin-top: 30px;
 }
.footer{
    display: flex;
      justify-content: end;
      padding-right: 40px;
      padding-top: 23px;
  }
</style>